Web Goodies

Welcome to Micky's collection of free resources to help with web development and design No need to credit me, but it is appreciated a lot!!

Site Templates

Super Basic Theme Toggle

A template with a theme toggle drop down menu that changes the color of the background, text, header, and other elements you want to add~! Includes notes for how to use~

Preview Download

Fonts

click the links to download ~

Text Effects

Basic Shadow

<h1 style="color:white; text-shadow:2px 2px 4px #000000;">White Shadow</h1>

Pink Shadow

Color Animation

<html><div class="coloranimation"> <h1>Color Animation</h1></div></html><style>.coloranimation { text-transform: uppercase; background-image: linear-gradient( -225deg, #ffd6e9 0%, #ffbcda 29%, #e1b09c 67%, #c79274 100% ); background-size: auto auto; background-clip: border-box; background-size: 200% auto; color: #fff; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textclip 2s linear infinite; display: inline-block; } @keyframes textclip { to { background-position: 200% center; } }</style>

Buttons

Here i will add codes for buttons with various effects

<html> <button class="button-71" role="button">Pink Shiny Button</button> <style> /* CSS */ .button-71 { background-color: #f299c1; border: 0; border-radius: 56px; color: #fff; cursor: pointer; display: inline-block; font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif; font-size: 18px; font-weight: 600; outline: 0; padding: 16px 21px; position: relative; text-align: center; text-decoration: none; transition: all .3s; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-71:before { background-color: initial; background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%); border-radius: 125px; content: ""; height: 50%; left: 4%; opacity: .5; position: absolute; top: 0; transition: all .3s; width: 92%; } .button-71:hover { box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px; transform: scale(1.05); } @media (min-width: 768px) { .button-71 { padding: 16px 48px; } } </style> </html>

<html> <button class="button-71" role="button">Purple Shiny Button</button> <style> /* CSS */ .button-71 { background-color: #dca3ff; border: 0; border-radius: 56px; color: #fff; cursor: pointer; display: inline-block; font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif; font-size: 18px; font-weight: 600; outline: 0; padding: 16px 21px; position: relative; text-align: center; text-decoration: none; transition: all .3s; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-71:before { background-color: initial; background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%); border-radius: 125px; content: ""; height: 50%; left: 4%; opacity: .5; position: absolute; top: 0; transition: all .3s; width: 92%; } .button-71:hover { box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px; transform: scale(1.05); } @media (min-width: 768px) { .button-71 { padding: 16px 48px; } } </style> </html>

<html> <button class="button-17" role="button">Pink Check Button</button> <style> .button-17 { align-items: center; appearance: none; background-color: #fff; background-image: url('https://i.ibb.co/2P4CsV5/check6-pk1.gif'); border-radius: 24px; border-style: none; box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0; box-sizing: border-box; color: #fff; text-shadow: 2px 2px 5px #704938, 0 0 25px #fa78bb, 0 0 5px pink; cursor: pointer; display: inline-flex; fill: currentcolor; font-family: "Google Sans",Roboto,Arial,sans-serif; font-size: 20px; font-weight: 500; height: 48px; justify-content: center; letter-spacing17: .25px; line-height: normal; max-width: 100%; overflow: visible; padding: 2px 24px; position: relative; text-align: center; text-transform: none; transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: auto; will-change: transform,opacity; z-index: 0; } .button-17:hover { background: #F6F9FE; background-image: url('https://i.ibb.co/3vJFJ8t/check6-gy1.gif'); color: #ffe8f4; } .button-17:active { box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%); outline: none; } .button-17:focus { outline: none; border: 2px solid #4285f4; } .button-17:not(:disabled) { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):hover { box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px; } .button-17:not(:disabled):focus { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):active { box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px; } .button-17:disabled { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } </style> </html>

<html> <button class="button-17" role="button">Blue Check Button</button> <style> .button-17 { align-items: center; appearance: none; background-color: #fff; background-image: url('https://i.ibb.co/nMxz7jr/check6-bl2.gif'); border-radius: 24px; border-style: none; box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0; box-sizing: border-box; color: #fff; text-shadow: 2px 2px 5px grey, 0 0 25px blue, 0 0 5px darkblue; cursor: pointer; display: inline-flex; fill: currentcolor; font-family: "Google Sans",Roboto,Arial,sans-serif; font-size: 20px; font-weight: 500; height: 48px; justify-content: center; letter-spacing17: .25px; line-height: normal; max-width: 100%; overflow: visible; padding: 2px 24px; position: relative; text-align: center; text-transform: none; transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: auto; will-change: transform,opacity; z-index: 0; } .button-17:hover { background: #fff; background-image: url('https://i.ibb.co/qMFSRdh/check6-pu1.gif'); color: #fff; } .button-17:active { box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%); outline: none; } .button-17:focus { outline: none; border: 2px solid #4285f4; } .button-17:not(:disabled) { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):hover { box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px; } .button-17:not(:disabled):focus { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):active { box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px; } .button-17:disabled { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } </style> </html>

<html> <button class="button-24" role="button">pink gingham button</button> <style> .button-24 { background: #FF4742; background-image:url('https://i.ibb.co/47R8pcQ/bg-gin4-pink1.gif'); border: 1px solid pink; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px; box-sizing: border-box; color: #FFFFFF; text-shadow: 2px 2px 5px grey; cursor: pointer; display: inline-block; font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif; font-size: 20px; font-weight: 800; line-height: 25px; min-height: 40px; outline: 0; padding: 5px 9px; text-align: center; text-rendering: geometricprecision; text-transform: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; width:200; } .button-24:hover, .button-24:active { background-color: initial; background-position: 0 0; color: #f299c1; text-shadow: 2px 8px 5px white; } .button-24:active { opacity: .5; } </style> </html>

<html> <button class="button-25" role="button">blue gingham button</button> <style> .button-25 { background: #FF4742; background-image:url('https://i.ibb.co/ZdZsfhR/bg-gin4-blue.gif'); border: 1px solid lightblue; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px; box-sizing: border-box; color: #FFFFFF; text-shadow: 2px 2px 5px grey; cursor: pointer; display: inline-block; font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif; font-size: 20px; font-weight: 800; line-height: 25px; min-height: 40px; outline: 0; padding: 5px 9px; text-align: center; text-rendering: geometricprecision; text-transform: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; width:200; } .button-25:hover, .button-25:active { background-color: initial; background-position: 0 0; color: skyblue; text-shadow: 2px 8px 5px white; } .button-25:active { opacity: .5; } </style> </html>

Extra Goodies

Here i will add extra codes and scripts for fun website swag :3

CSS Scrolling Marquee

Since the marquee tag is officially invalid on all browsers here's a CSS code that scrolls text and images using animations and keyframes

<style>
.marquee {
height: 50px;
overflow: hidden;
position: relative;
background: #FFFFFFC2;
border-radius:9px;
color: #333;
}

.marquee p {
position: absolute;
width: 200%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(40%);
-moz-animation: scroll-left 10s linear infinite;
-webkit-animation: scroll-left 10s linear infinite;
animation: scroll-left 25s linear infinite;
font-size:16px;
font-family:arial;
}

@-moz-keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}

@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}

@keyframes scroll-left {
100% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
</style>
<div class="marquee">
<p style="color:#C49B84; text-shadow:0px 0px 7px white;">
omg wow look at this scrolling marquee
</p>
</div>

Cursor Sparkles

White Sparkle

<script type="text/javascript">
// <![CDATA[
var colour="#FFFFFF";
var sparkles=120;

/****************************
*  Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();